<template>
  <div class="order_review">
    <div class="team">
      <div class="powertop">
        <router-link class="powertopli powertopact" to="/order_examine/order_review">审核订单</router-link>
        <router-link class="powertopli " to="/order_examine/order_areas">敏感地区</router-link>
      </div>
    </div>
    <div class="ordercenter">
      <div class="ordercenterli">
        <div class="ordersearch">

          <div class="kflex" style="margin-bottom: 20px;">
            <el-input v-model="search.product_name" style="width: 250px; margin-right: 20px;"
              placeholder="商品名称"></el-input>
            <el-input v-model="search.product_sku" style="width: 250px; margin-right: 20px;"
              placeholder="商品编码"></el-input>
            <el-input v-model="search.source" style="width: 250px; margin-right: 20px;" placeholder="订单来源"></el-input>
            <el-input v-model="search.share_name" style="width: 250px; margin-right: 20px;"
              placeholder="分销商"></el-input>

          </div>
          <div class="kflex" style="margin-bottom: 20px;">
            <el-input v-model="search.source_id" style="width: 250px; margin-right: 20px;"
              placeholder="外部订单号"></el-input>
            <el-input v-model="search.order_id" style="width: 250px; margin-right: 20px;" placeholder="订单号"></el-input>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div>订单变更时间：</div>
            <el-date-picker v-model="search.time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
              range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="orderflex">
            <el-button round @click="dosearch()" type="danger">查询</el-button>
          </div>


        </div>
        <div class="orderlist" v-loading="loading">
          <div class="newsearch">
            <div :class="act == 1 ? 'news1 act':'news1'">全部订单</div>
            <!-- <div :class="act == 1 ? 'news1 act':'news1'" @click="allorder">全部订单</div>
            <div :class="act == 2 ? 'news1 act':'news1'" @click="failorder">显示加急订单({{shennum}})</div> -->
          </div>

          <el-table :data="orderlist"  style="width: 100%">
                <el-table-column label="ID" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.id,scope.row.id)">{{scope.row.id}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="分销商" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.name,scope.row.id)">{{scope.row.name}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="下单时间" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.created_at,scope.row.id)">{{scope.row.created_at}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.my_gname,scope.row.id)">
                      <el-tooltip popper-class="tooltip" effect="dark" placement="top">
                        <div slot="content">{{scope.row.my_gname}}</div>
                        <div>{{scope.row.my_gname}}</div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="购买号码" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.plan_mobile,scope.row.id)">{{scope.row.plan_mobile}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="订单来源" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.source,scope.row.id)">{{scope.row.source}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="外部订单编号" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.source_id,scope.row.id)">{{scope.row.source_id}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="收货人" align="center" >
                  <template slot-scope="scope">
                    <div @dblclick="copy(scope.row.address_name,scope.row.id)">{{scope.row.address_name}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="收货地址" align="center" >
                  <template slot-scope="scope">
                    <el-tooltip popper-class="tooltip" effect="dark" placement="top">
                      <div slot="content">
                        {{scope.row.address_province}}{{scope.row.address_city}}{{scope.row.address_district}}{{scope.row.address}}</div>
                      <div>{{scope.row.address_province}}{{scope.row.address_city}}{{scope.row.address_district}}{{scope.row.address}}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" >
                  <template slot-scope="scope">
                    <el-button type="text" @click="reviewsee(scope.row.id)">审核</el-button>
                  </template>
                </el-table-column>
          </el-table>


          <div class="orderfanye">
            <el-pagination background :page-size="search.size" :current-page="search.page" @current-change="fanye"
              layout="total,prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>

      </div>
    </div>
    <!-- 审核点击查看的dialog -->
    <el-dialog title="照片审核" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1254px" center
      :before-close="closed">
      <div v-loading="reviewloading">
        <div>商品照片大小：
          <span v-if="choosed.pic_size == 0">未设置</span>
          <span v-if="choosed.pic_size != 0">
            <{{choosed.pic_size}}k </span>
              <span class="photosize" @click="photosize()">设置商品图片大小</span>
        </div>


        <draggable v-model="choose2" :options="{animation:500}" @change="picdesc">
          <transition-group class="diaflex">
            <div class="reviewphone" v-for="item in choose2" :key="item.which">
              <div v-if="item.url != ''"><img @click="fixpic($event,item.which)" :src="item.url" /></div>
              <div v-if="item.url == ''">暂无照片</div>
              <span v-if="item.size != '' && item.size <= choosed.pic_size">{{item.size}}k</span>
              <span class="red" v-if="item.size != '' && item.size > choosed.pic_size"><i
                  class="el-icon-warning-outline"></i>{{item.size}}k</span>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="diaflex3" v-loading="reviewloading">
        <div class="reason">
          <div :class="i == ii ? 'reasonact' : ''" v-for="(item,i) in reasonlist" :key="i"
            @click="choosereason(item,i)">{{item}}</div>

          <span class="viewclick2" @click="reasonlog = true">自定义</span>
        </div>

      </div>
      <div v-loading="reviewloading" class="view" v-if="!fixchoosed">
        <div class="viewclick" @click="fixchoosed = true">修改信息</div>
        <div class="viewflex">
          <!-- 生产的人使用 -->
          <span>商品名称：{{choosed.supplier_product_name}}</span>
          <span>商品编码：{{choosed.supplier_product_sku}}</span>
          <span>外部订单编号：{{choosed.source_id}}</span>
        </div>
        <div class="viewflex">
          <span>姓名：{{choosed.id_card_name}}</span>
          <span>身份证号：{{choosed.id_card_num}}</span>
          <span>收货人:{{choosed.address_name}}</span>
          <span>收货地址：{{choosed.address_province}}{{choosed.address_city}}{{choosed.address_district}}{{choosed.address}}</span>
        </div>
      </div>

      <div class="view" v-loading="reviewloading" v-if="fixchoosed">

        <el-form ref="form" @submit.native.prevent :model="search" label-width="100px">
          <div class="viewflex2">
            <el-form-item label="商品编码：">
              <el-input v-model="choosed.source_sku" placeholder="请输入商品编码"></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
              <el-input v-model="choosed.id_card_name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：">
              <el-input v-model="choosed.id_card_num" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </div>
          <div class="viewflex2 viewflex3">
            <el-form-item label="收货地址：" class="fixaddress">
              <el-cascader @change="changeaddress" v-model="choosed.city" :options="options"></el-cascader>
              <el-input v-model="choosed.address" placeholder="请输入收货地址"></el-input>
            </el-form-item>
            <el-form-item label="收货人:">
              <el-input v-model="choosed.address_name" placeholder="请输入收货人"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div style="text-align:right">
          <el-button type="primary" plain="" size="small" @click="fixchoosed = false">取消</el-button>
          <el-button type="primary" size="small" @click="fixchoosedok()">保存</el-button>
        </div>
      </div>

      <div class="diaflex" v-loading="reviewloading">
        <div class="review">


          <el-tooltip class="item" effect="dark" content="请选择审核拒绝理由，没有可选理由请先在“自定义”处设置" placement="top-start" v-if="reviewback">
                <el-button :class="{redbg : redbgy}" type="info" @click="reviewfial()" :disabled="reviewback">审核拒绝</el-button>
          </el-tooltip>
          <el-button :class="{redbg : redbgy}" type="danger" @click="reviewfial()" :disabled="reviewback" v-if="!reviewback">审核拒绝</el-button>
          <el-button type="primary" @click="reviewgo()">审核通过</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 图片裁剪 -->
    <el-dialog title="图片裁剪" :visible.sync="piclog" :close-on-click-modal="false" width="1254px" top="0">
      <div class="jianqieall">
        <div>
          <el-button type="primary" size="small" @click="xuanzhuan">右旋转90度</el-button>
        </div>
        <div>
          <el-button size="small" @click="piclog = false">取消</el-button>
          <el-button type="primary" size="small" @click="dopic()">确定保存</el-button>
        </div>
      </div>
      <div class="jianqie">
        <vueCropper ref="cropper" :img="picurl" maxImgSize="1000" :centerBox="false" :infoTrue="false" :full="false"
          :info="true" :autoCrop="true" autoCropWidth="500" autoCropHeight="500"></vueCropper>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
							<el-button size="small"  @click="piclog = false">取 消</el-button>
							<el-button type="primary" size="small" @click="dopic()">确 定</el-button>
						 </span> -->
    </el-dialog>
    <!-- 自定义理由 -->
    <el-dialog title="自定义理由" :visible.sync="reasonlog" :close-on-click-modal="false" width="60%">
      <div>请一行输入一个</div>
      <div>
        <el-input type="textarea" :rows="10" placeholder="请一行输入一个" v-model="reasonex"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="reasonlog = false">取 消</el-button>
        <el-button type="primary" size="small" @click="reasonok()" :loading="reasonoking">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import router from "@/router";
  import {
    regionData,
    CodeToText,
    TextToCode
  } from "element-china-area-data";
  if (window.location.href.indexOf("91haoka.com") > -1) {
    var realurl = "http://test.91haoka.com:8998"
  } else {
    var realurl = ""
  }
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      draggable
    },
    name: 'order_review',
    data() {
      return {
        options: regionData,

        product_name: "",
        sku: "",
        redbgy: false,
        lanseid: "",
        checkedarea: [],
        allarea: [],
        choosearea: [],
        allchoose: false,
        isIndeterminate: false,
        checkAll: false,
        tabnum: 1,
        reasonnum: 0,
        reasons: "",
        loading: true,
        dialogVisible: false,
        piclog: false,
        picurl: "",
        reviewback: true,
        reviewloading: false,
        questionloading: true,

        questionsear: "",
        questionname1: "",
        questionname2: "",
        questionname3: "",
        whereloading: true,
        wherelist: [],
        orderlist: [],
        qudaolist: [],
        chanpinlist: [],
        questionlist: [],
        uploadpic: "",
        total: 0,
        choose: {
          face: "",
          back: "",
          hand: "",
        },
        choose2: [{
            url: "",
            size: "",
            which: "face"
          },
          {
            url: "",
            size: "",
            which: "back"
          },
          {
            url: "",
            size: "",
            which: "hand"
          }
        ],
        search: {
          channel_id: "",
          product_name: "",
          sp_id: "",
          merchant_name: "",
          product_sku: "",
          source: "",
          starttime: "",
          endtime: "",
          time: "",
          status: "",
          page: 1,
          size: 20,
          is_acc: 0,
          share_name: "",
          order_id: "",
          source_id: ""
        },
        copyBtn: "",
        act: 1,
        shennum: "",

        reasonlist: [],
        reasonlog: false,
        reasonex: "",
        reasonoking: false,

        choosed: {},
        fixchoosed: false,
        ii: 999,
        paixu: ""
      };
    },
    created() {

      //按回车键搜索
      var that = this
      document.onkeydown = function(e) {
        var ev = document.all ? window.event : e;
        if (ev.keyCode == 13) {
          that.dosearch()
        }
      }

      //获取待审核数据
      this.getlist()
      this.reason();
    },
    mounted() {
      var that = this
      //获取渠道列表
      axios.get('/api/store/orders-page/channels')
        .then(response => {
          this.qudaolist = response.data.data
        }),
        //获取产品列表
        axios.get('/api/store/supplier/products')
        .then(response => {
          this.chanpinlist = response.data.data.data
        })
    },
    methods: {
      //选择省市区重提用
      changeaddress: function(v) {
        this.choosed.address_province_code = v[0];
        this.choosed.address_city_code = v[1];
        this.choosed.address_district_code = v[2];

        this.choosed.address_province = CodeToText[v[0]],
          this.choosed.address_city = CodeToText[v[1]],
          this.choosed.address_district = CodeToText[v[2]];

      },

      //图片排序
      picdesc: function(evt) {
        console.log(this.choose2)
        this.reviewloading = true
        var u = window.location.origin

        var u1 = ""
        var u2 = ""
        var u3 = ""
        this.choose2[0].which = 'face'
        this.choose2[1].which = 'back'
        this.choose2[2].which = 'hand'
        if (this.choose2[0].url != '') {
          u1 = this.choose2[0].url.split("?v")[0]
        }
        if (this.choose2[1].url != '') {
          u2 = this.choose2[1].url.split("?v")[0]
        }
        if (this.choose2[2].url != '') {
          u3 = this.choose2[2].url.split("?v")[0]
        }
        var that = this
        axios.post('/api/plan-market/order/photos/url', {
            id: that.choosed.id,
            face_url: u1,
            back_url: u2,
            hand_url: u3
          })
          .then(response => {
            if (response.data.msg.code != 0) {
              that.$message.error(response.data.msg.info);
            } else {
              that.reviewloading = false
            }
          })
      },
      //全部订单
      allorder: function() {
        this.search.page = 1
        this.act = 1
        this.search.is_acc = 0
        this.loading = true
        this.getlist()
      },
      //加急订单
      failorder: function() {
        this.search.page = 1
        this.act = 2
        this.search.is_acc = 1
        this.loading = true
        this.getlist()
      },
      //点击复制
      copy: function(e, id) {
        this.lanseid = id
        console.log(e)
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', e);
        input.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        }
        document.body.removeChild(input);
      },

      //点击图片下载
      downpic: function(name, src) {
        var a = document.createElement('a')
        a.download = name
        a.href = src
        a.click();
      },

      //翻页功能
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },
      //获取待审核数据
      getlist: function() {
        this.reasons = ""
        this.ii = 999

        this.loading = true

        this.search.source = this.search.source.trim()
        this.search.product_name = this.search.product_name.trim()
        this.search.product_sku = this.search.product_sku.trim()
        this.search.share_name = this.search.share_name.trim()
        this.search.source_id = this.search.source_id.trim()
        this.search.order_id = this.search.order_id.trim()

        //获取待审核数据
        if (this.search.time == null) {
          this.search.starttime = ""
          this.search.endtime = ""
        } else {
          if (this.search.time[0] == undefined || this.search.time[0] == null) {
            this.search.starttime = ""
          } else {
            this.search.starttime = this.search.time[0]
          }
          if (this.search.time[1] == undefined || this.search.time[1] == null) {
            this.search.endtime = ""
          } else {
            this.search.endtime = this.search.time[1]
          }
        }
        // axios.get("/api/plan-market/order/production?type=3&flag=2&status=200&status_at_start="+this.search.starttime+"&status_at_end="+this.search.endtime)
        //     .then(response =>{
        //           this.shennum = response.data.data.num
        // 	})
        //加急订单用 为啥不知道
        var type = 3
        if (this.act == 2) {
          type = 1
        } else {
          type = 3
        }
        axios.get('/api/gth/orders?type=' + type + '&is_acc=' + this.search.is_acc + '&source=' + this.search
            .source + '&orderby=0' +
            '&status=200&page=' + this.search.page + '&page_size=' + this.search.size + '&product_name=' +
            encodeURIComponent(this.search.product_name) +
            '&product_sku=' + encodeURIComponent(this.search.product_sku) + '&name=' + this.search.share_name +
            '&source_id=' + this.search.source_id + '&order_id=' + this.search.order_id +
            '&status_at_start=' + this.search.starttime + '&status_at_end=' + this.search.endtime)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.orderlist = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }


          })

        //       axios.get('/api/gth/orders?type=1&is_acc=1&status=200')
        // .then(response => {

        //         if(response.data.msg.code == 0){
        //           this.shennum = response.data.data.total
        //         }else{
        //           this.$message.error(response.data.msg.info);
        //         }
        // })

      },


      //搜索
      dosearch: function() {
        this.search.page = 1
        this.getlist()
      },
      //定义商品图片大小
      photosize: function() {
        var that = this
        this.$prompt('请输入商品' + this.choosed.supplier_product_name + '图片最大值（以kb为单位，1M = 1024KB）', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
          .then(({
            value
          }) => {
            axios.post('/api/plan-market/pic/size', {
                pic_size: value,
                product_id: this.choosed.product_id
              })
              .then(response => {
                if (response.data.msg.code != 0) {
                  that.$message.error(response.data.msg.info);
                } else {
                  that.reviewsee(that.choosed.id)

                }
              })
          })

      },
      //新建理由
      reasonok: function() {
        this.reasonoking = true
        var that = this
        axios.post('/api/plan-market/user/comments', {
            comments: that.reasonex
          })
          .then(response => {
            if (response.data.msg.code != 0) {
              that.$message.error(response.data.msg.info);
            } else {
              that.reasonlog = false
              that.reasonoking = false

              if(that.reasonex){
                that.reasonlist = that.reasonex.split("\n")
              }

            }
          })
      },
      //所有理由
      reason: function() {
        var that = this
        axios.get('/api/plan-market/user/comments')
          .then(response => {
            if (response.data.msg.code != 0) {
              that.$message.error(response.data.msg.info);
            } else {
              that.reasonex = response.data.data;
              if (response.data.data != "") {
                that.reasonlist = response.data.data.split("\n")
              }
              console.log(that.reasonlist)

            }
          })
      },
      //选择理由
      choosereason: function(reason, i) {
        this.reasons = reason
        this.reviewback = false
        this.ii = i
      },
      //输入理由
      reasoninput: function() {
        if (this.reasons != "" || this.reasonnum != 0) {
          this.reviewback = false
          this.redbgy = true
        } else {
          this.reviewback = true
          this.redbgy = false
        }
      },
      //修改产品信息
      fixchoosedok: function() {
        var that = this
        axios.get("/api/plan-market/order/detail?order_id=" + that.choosed.id)
          .then(function(response) {
            if (response.data.msg.code == 0) {
              var data = {}
              data['id'] = that.choosed.id
              if (that.choosed.id_card_name != response.data.data.id_card_name) {
                data['id_card_name'] = that.choosed.id_card_name
              }
              if (that.choosed.id_card_num != response.data.data.id_card_num) {
                data['id_card_num'] = that.choosed.id_card_num
              }
              if (that.choosed.address != response.data.data.address) {
                data['address'] = that.choosed.address
              }


              if (that.choosed.address_province != response.data.data.address_province) {
                data['address_province'] = that.choosed.address_province
              }
              if (that.choosed.address_city != response.data.data.address_city) {
                data['address_city'] = that.choosed.address_city
              }
              if (that.choosed.address_district != response.data.data.address_district) {
                data['address_district'] = that.choosed.address_district
              }
              if (that.choosed.address_province_code != response.data.data.address_province_code) {
                data['address_province_code'] = that.choosed.address_province_code
              }
              if (that.choosed.address_city_code != response.data.data.address_city_code) {
                data['address_city_code'] = that.choosed.address_city_code
              }
              if (that.choosed.address_district_code != response.data.data.address_district_code) {
                data['address_district_code'] = that.choosed.address_district_code
              }

              if (that.choosed.address_name != response.data.data.address_name) {
                data['address_name'] = that.choosed.address_name
              }
              if (that.choosed.source_sku != response.data.data.source_sku) {
                data['pro_sku'] = that.choosed.source_sku
              }
              axios.post("/api/plan-market/order/info/update", data)
                .then(response => {
                  if (response.data.msg.code != 0) {
                    that.$message.error(response.data.msg.info);
                  } else {
                    that.fixchoosed = false
                    that.$message({
                      message: '修改成功',
                      type: 'success'
                    });


                    that.reviewsee(that.choosed.id)
                  }
                })
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })

      },
      //点击查看
      reviewsee: function(orderid) {
        this.ii = 999
        this.dialogVisible = true
        this.reviewloading = true
        var that = this
        //获取此订单详细信息
        axios.get("/api/plan-market/order/detail?order_id=" + orderid)
          .then(function(response) {
            if (response.data.msg.code == 0) {
              that.choosed = response.data.data
              var city = [];
              try {
                if (that.choosed.address_province != "") {
                  city.push(TextToCode[that.choosed.address_province].code);
                }
                if (that.choosed.address_city != "") {
                  city.push(TextToCode[that.choosed.address_province][that.choosed.address_city].code);
                }
                if (that.choosed.address_district != "") {
                  city.push(TextToCode[that.choosed.address_province][that.choosed.address_city][that.choosed
                    .address_district
                  ].code);
                }
              } catch (err) {
                console.log("地址对应不起来");
              }
              that.choosed.city = city
              console.log(that.choosed.city);
              axios.get('/api/plan-market/order/photos/url?id_card_num=' + that.choosed.id_card_num + '&id=' + that
                  .choosed.id)
                .then(response => {
                  if (response.data.msg.code != 0) {
                    that.$message.error(response.data.msg.info);
                  } else {
                    var random = Math.random()
                    if (response.data.data.face_url != '') {
                      that.choose2[0].url = response.data.data.face_url + '?v=' + random
                      that.choose2[0].size = response.data.data.face_size
                    } else {
                      that.choose2[0].url = ''
                      that.choose2[0].size = ''
                    }
                    if (response.data.data.back_url != '') {
                      that.choose2[1].url = response.data.data.back_url + '?v=' + random
                      that.choose2[1].size = response.data.data.back_size
                    } else {
                      that.choose2[1].url = ''
                      that.choose2[1].size = ''
                    }
                    if (response.data.data.hand_url != '') {
                      that.choose2[2].url = response.data.data.hand_url + '?v=' + random
                      that.choose2[2].size = response.data.data.hand_size
                    } else {
                      that.choose2[2].url = ''
                      that.choose2[2].size = ''
                    }
                    that.reviewloading = false
                  }
                })
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //关闭审核dialog的时候
      closed: function(done) {
        done();
        this.getlist()
      },
      //关闭问题图片审核dialog的时候
      questionclose: function(done) {
        done();
        // 获取问题照片
        axios.get('/api/ROS/plan/photo')
          .then(response => {
            this.questionlist = response.data.data
            this.questionloading = false
          })
      },
      //点击照片进行修改照片
      fixpic: function(e, whopic) {
        // this.picurl = "../../../static/face.jpg"
        console.log(e)
        this.picurl = e.target.src
        this.piclog = true
        //点击照片时候定下来修改的是哪张照片
        this.uploadpic = whopic
        console.log(this.uploadpic)
      },
      //旋转90度
      xuanzhuan: function() {
        this.$refs.cropper.rotateLeft()
      },
      //修建照片后上传
      dopic: function() {
        var that = this
        this.reviewloading = true
        this.$refs.cropper.getCropBlob((data) => {
          var formData = new FormData();
          formData.append("id_num", that.choosed.id_card_num);
          formData.append("order_id", that.choosed.id);
          formData.append("pic[" + this.uploadpic + "]", data);
          formData.append("type", "plan");
          axios.post(realurl + '/api/ROS/plan/photo/cut', formData)
            .then(response => {
              axios.get('/api/plan-market/order/photos/url?id_card_num=' + that.choosed.id_card_num + '&id=' +
                  that.choosed.id)
                .then(response => {
                  if (response.data.msg.code != 0) {
                    that.$message.error(response.data.msg.info);
                  } else {
                    var random = Math.random()
                    if (response.data.data.face_url != '') {
                      that.choose2[0].url = response.data.data.face_url + '?v=' + random
                      that.choose2[0].size = response.data.data.face_size
                    } else {
                      that.choose2[0].url = ''
                      that.choose2[0].size = ''
                    }
                    if (response.data.data.back_url != '') {
                      that.choose2[1].url = response.data.data.back_url + '?v=' + random
                      that.choose2[1].size = response.data.data.back_size
                    } else {
                      that.choose2[1].url = ''
                      that.choose2[1].size = ''
                    }
                    if (response.data.data.hand_url != '') {
                      that.choose2[2].url = response.data.data.hand_url + '?v=' + random
                      that.choose2[2].size = response.data.data.hand_size
                    } else {
                      that.choose2[2].url = ''
                      that.choose2[2].size = ''
                    }
                    that.reviewloading = false
                    that.piclog = false
                  }
                })

            })
        })
      },
      //审核通过
      reviewgo: function() {
        //点击审核通过要获取下一条先转圈
        this.reviewloading = true
        this.ii = 999
        var that = this
        var params = new URLSearchParams();
        params.append('isok', 1);
        params.append('order_id', this.choosed.id);
        axios.post('/api/plan-market/order/check', params)
          .then(response => {
            this.$message.success('已通过审核');
            //审核通过后获取下一条数据
            //先把选中拒绝的状态取消
            that.reasons = ""
            that.reviewback = true
            if (this.search.time == null) {
              this.search.start = ""
              this.search.end = ""
            } else {
              if (this.search.time[0] == undefined || this.search.time[0] == null) {
                this.search.start = ""
              } else {
                this.search.start = this.search.time[0]
              }
              if (this.search.time[1] == undefined || this.search.time[1] == null) {
                this.search.end = ""
              } else {
                this.search.end = this.search.time[1]
              }
            }
            axios.get('/api/plan-market/order/production?status=200&is_acc=' + this.search.is_acc + '&channel_id=' +
                that.search.channel_id + '&product_name=' + that.search.product_name + '&sp_id=' + that.search
                .sp_id + '&product_sku=' + that.search.product_sku + '&merchant_name=' + that.search.share_name +
                '&one=1&start=' + that.search.start + '&end=' + that.search.end)
              .then(response2 => {
                if (response2.data.msg.code == 0) {
                  if (response2.data.data.id == undefined) {
                    this.$message({
                      message: '最后一条审核完成',
                      type: 'success'
                    });
                    that.dialogVisible = false
                    that.getlist()
                  } else {
                    that.reasons = ""
                    that.choosed = response2.data.data
                    if (!that.choosed.pic_size) {
                      that.choosed.pic_size = 0
                    }
                    axios.get('/api/plan-market/order/photos/url?id_card_num=' + that.choosed.id_card_num +
                        '&id=' + that.choosed.id)
                      .then(response => {
                        if (response.data.msg.code != 0) {
                          that.$message.error(response.data.msg.info);
                        } else {
                          var random = Math.random()
                          if (response.data.data.face_url != '') {
                            console.log(response.data.data.face_size)
                            that.choose2[0].url = response.data.data.face_url + '?v=' + random
                            that.choose2[0].size = response.data.data.face_size
                          } else {
                            that.choose2[0].url = ''
                            that.choose2[0].size = ''
                          }
                          if (response.data.data.back_url != '') {
                            console.log(response.data.data.back_size)
                            that.choose2[1].url = response.data.data.back_url + '?v=' + random
                            that.choose2[1].size = response.data.data.back_size
                          } else {
                            that.choose2[1].url = ''
                            that.choose2[1].size = ''
                          }
                          if (response.data.data.hand_url != '') {
                            console.log(response.data.data.hand_size)
                            that.choose2[2].url = response.data.data.hand_url + '?v=' + random
                            that.choose2[2].size = response.data.data.hand_size
                          } else {
                            that.choose2[2].url = ''
                            that.choose2[2].size = ''
                          }
                          that.reviewloading = false
                        }
                      })
                  }
                } else {

                }

              })
          })
      },
      //审核失败
      reviewfial: function() {
        //点击审核通过要获取下一条先转圈
        this.reviewloading = true
        this.ii = 999
        var that = this
        var params = new URLSearchParams();
        params.append('isok', 0);
        params.append('order_id', this.choosed.id);
        params.append('reason', this.reasons);
        axios.post('/api/plan-market/order/check', params)
          .then(response2 => {
            if (response2.data.msg.code == 0) {
              //审核通过后获取下一条数据
              //先把选中拒绝的状态取消
              this.$message.success('已拒绝审核');
              that.reasons = ""
              that.reviewback = true
              if (this.search.time == null) {
                this.search.start = ""
                this.search.end = ""
              } else {
                if (this.search.time[0] == undefined || this.search.time[0] == null) {
                  this.search.start = ""
                } else {
                  this.search.start = this.search.time[0]
                }
                if (this.search.time[1] == undefined || this.search.time[1] == null) {
                  this.search.end = ""
                } else {
                  this.search.end = this.search.time[1]
                }
              }
              axios.get('/api/plan-market/order/production?status=200&channel_id=' + that.search.channel_id +
                  '&product_name=' + that.search.product_name + '&sp_id=' + that.search.sp_id + '&product_sku=' +
                  that.search.product_sku + '&merchant_name=' + that.search.share_name + '&one=1&start=' + that
                  .search.start + '&end=' + that.search.end)
                .then(response => {

                  if (response.data.data.id == undefined) {
                    this.$message({
                      message: '最后一条审核完成',
                      type: 'success'
                    });
                    that.dialogVisible = false
                    that.getlist()
                    that.reviewloading = false
                  } else {
                    that.reasons = ""
                    that.choosed = response.data.data
                    if (!that.choosed.pic_size) {
                      that.choosed.pic_size = 0
                    }
                    axios.get('/api/plan-market/order/photos/url?id_card_num=' + that.choosed.id_card_num +
                        '&id=' + that.choosed.id)
                      .then(response => {
                        if (response.data.msg.code != 0) {
                          that.$message.error(response.data.msg.info);
                        } else {
                          var random = Math.random()
                          if (response.data.data.face_url != '') {
                            that.choose2[0].url = response.data.data.face_url + '?v=' + random
                            that.choose2[0].size = response.data.data.face_size
                          } else {
                            that.choose2[0].url = ''
                            that.choose2[0].size = ''
                          }
                          if (response.data.data.back_url != '') {
                            that.choose2[1].url = response.data.data.back_url + '?v=' + random
                            that.choose2[1].size = response.data.data.back_size
                          } else {
                            that.choose2[1].url = ''
                            that.choose2[1].size = ''
                          }
                          if (response.data.data.hand_url != '') {
                            that.choose2[2].url = response.data.data.hand_url + '?v=' + random
                            that.choose2[2].size = response.data.data.hand_size
                          } else {
                            that.choose2[2].url = ''
                            that.choose2[2].size = ''
                          }
                          that.reviewloading = false
                        }
                      })
                  }

                })
            } else {
              this.$message.error(response2.data.msg.info);
            }

          })
      },

    }
  };
</script>
<style lang="scss" scoped>
  .order_review {
    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      background: #f9f9f9;
    }

    .powertopli {
      flex-basis: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
    }

    .router-link-active {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
    }



    .result {
      margin-top: 20px;
    }

    .newsearch {
      display: flex;
      text-align: center;
      margin-bottom: 10px;
      font-size: 14px;

      .act {
        color: #2974FF;
        border-bottom: 3px #2974FF solid !important;
      }

      .news1 {
        flex-basis: 170px;
        border-bottom: 3px #DCDCDC solid;
        padding: 10px 0;
        cursor: pointer;
      }

      .news2 {
        flex-basis: 170px;
        padding: 10px 0;
        border-bottom: 3px #DCDCDC solid;
        cursor: pointer;
      }

      .news3 {
        flex-basis: 170px;
        padding: 10px 0;
        border-bottom: 3px #DCDCDC solid;
        cursor: pointer;
      }

      .news4 {
        flex-basis: 656px;
        padding: 10px 0;
        border-bottom: 3px #DCDCDC solid;
        cursor: pointer;
      }
    }

    .ordertab {
      display: flex;
      background: #F9F9F9;
    }

    .ordertabli {
      flex-basis: 160px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      color: #727272;
      cursor: pointer;
      border-top: 3px #F9F9F9 solid;
    }

    .ordertabact {
      border-top: 3px #f00 solid;
      background: #FFFFFF;
    }

    .ordersearch {
      background: #FFFFFF;
      padding: 15px 30px;
    }

    .orderflex {
      display: flex;

      /deep/ .el-form-item {
        margin-bottom: 20px;
      }

      /deep/ .el-form-item__label {
        font-size: 14px;
      }

      /deep/ .el-input {
        width: 220px;
      }

      /deep/ .el-form-item__content {}

      /deep/ .el-input__inner {}

      /deep/ .el-input__icon {}
    }

    .ordersub {
      padding-left: 100px;
    }

    .list {
      text-align: center;
      color: #727272;
      display: flex;
      width: 100%;
      border-bottom: 1px #EAEAEA solid;
    }

    .orderlist {
      padding: 20px 20px;
      background: #FFFFFF;
    }

    .list .th {
      background: #E5E5E5;
      line-height: 45px;
      font-size: 14px;
      flex: 1;
    }

    .list .td {
      line-height: 45px;
      height: 45px;
      font-size: 14px;
      overflow: hidden;
      cursor: pointer;
      flex: 1;
    }

    .reviewsee {
      cursor: pointer;
      color: #1478F0;
    }

    .orderfanye {
      text-align: right;
      margin: 20px 0;
    }

    .diaflex {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }

    .diaflex3 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .reason div {
        background: #D4D4D4;
        color: #FFFFFF;
        text-align: center;
        font-size: 14px;
        margin-right: 20px;
        margin-bottom: 10px;
        padding: 7px 14px;
        border-radius: 3px;
        cursor: pointer;
      }

      .reasonact {
        background: #FF5A5A !important;
      }

      .reason input {
        width: 200px;
      }

      .reasonf {
        margin-top: 20px;
        background: #FFFFFF !important;
        width: 300px;
      }
    }

    .reviewphone {
      flex-basis: 377px;
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #EAEAEA;
      flex-wrap: wrap;
      position: relative;

      span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        background: #FFF;
        padding: 5px 10px;
      }

      .red {
        color: #FF0000;
      }
    }

    .reviewphone img {
      max-width: 100%;
      max-height: 250px;
    }

    .prompt {
      flex-basis: 377px;
      color: #E600FF;
      font-size: 14px;
      align-items: flex-end;
      display: flex;
    }

    .review {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .questionsear {
      width: 200px;
    }

    .quesresult {
      width: 100%;
      text-align: center;
    }

    .red {
      background: #FF0000;
      color: #FFFFFF;
      border: 1px #FF0000 solid;
    }

    .reason {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0;

      button {
        height: 30px;
      }
    }

    .review {
      /deep/ .el-button {
        padding: 9px 30px;
      }
    }

    .view {
      background: #F9F9F9;
      border: 1px #EBEBEB solid;
      text-align: center;
      padding: 20px;
      position: relative;

      .viewflex {
        display: flex;
        justify-content: center;

        span {
          margin: 5px 20px;
        }
      }

      .viewflex2 {
        display: flex;

        .fixaddress {
          /deep/ .el-input {
            line-height: 32px;
            width: 440px;
          }
        }
      }

      .viewflex3 {
        .el-cascader {
          width: 300px !important;
          margin-right: 20px;

          /deep/ .el-input {
            width: 300px !important;
          }
        }

        .el-input {
          width: 300px !important;
        }
      }

      .viewclick {
        position: absolute;
        right: 10px;
        bottom: 38px;
        color: #1478F0;
        cursor: pointer;
      }

      /deep/ .el-form-item {
        margin-bottom: 20px;
      }

      /deep/ .el-form-item__label {
        font-size: 14px;
      }

      /deep/ .el-input {
        width: 220px;
      }

      /deep/ .el-form-item__content {}

      /deep/ .el-input__inner {}

      /deep/ .el-input__icon {}
    }

    .viewclick2 {
      padding: 4px 14px;
      color: #1478F0;
      cursor: pointer;
    }

    .redbg {
      background: #FF5A5A !important;
    }

    .reviewback {
      background: #848484;
      flex-basis: 123px;
      padding: 0 !important;
      text-align: center;
      line-height: 40px;
      height: 40px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .reviewgo {
      background: #7CCF3E;
      flex-basis: 123px;
      padding: 0 !important;
      text-align: center;
      line-height: 40px;
      height: 40px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .jianqie {
      width: 100%;
      height: 730px;
    }

    .jianqieall {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }

    .mingan {
      padding: 20px 20px;
      background: #FFFFFF
    }

    .lanse {
      text-shadow: #1478F0 0px 0px 2px;
    }

    .photosize {
      margin-left: 10px;
      color: #1478F0;
      cursor: pointer;
    }
  }
</style>
